<template>
  <div v-loading="state.loading" class="merak-user-card">
    <div class="merak-user-card--content">
      <el-avatar :size="70" :src="userInfo.avatar" />
      <div class="merak-user-card--info">
        <div class="merak-user-card--info-header">
          <div class="merak-user-card--info-title">
            <span>{{ userInfo.name }}</span>
            <MerakIcon size="14" :color="userInfo.sex === 0 ? '#FF619A' : '#0BADEC'">
              <template v-if="userInfo.sex === 0">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path
                    d="M12,4A6,6 0 0,1 18,10C18,12.97 15.84,15.44 13,15.92V18H15V20H13V22H11V20H9V18H11V15.92C8.16,15.44 6,12.97 6,10A6,6 0 0,1 12,4M12,6A4,4 0 0,0 8,10A4,4 0 0,0 12,14A4,4 0 0,0 16,10A4,4 0 0,0 12,6Z"
                  />
                </svg>
              </template>
              <template v-else>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path
                    d="M9,9C10.29,9 11.5,9.41 12.47,10.11L17.58,5H13V3H21V11H19V6.41L13.89,11.5C14.59,12.5 15,13.7 15,15A6,6 0 0,1 9,21A6,6 0 0,1 3,15A6,6 0 0,1 9,9M9,11A4,4 0 0,0 5,15A4,4 0 0,0 9,19A4,4 0 0,0 13,15A4,4 0 0,0 9,11Z"
                  />
                </svg>
              </template>
            </MerakIcon>
          </div>
          <div class="merak-user-card--info-tags">
            <div class="merak-user-card--info-tag">
              <MerakIcon size="14" color="#646567">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path
                    d="M12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5M12,2A7,7 0 0,1 19,9C19,14.25 12,22 12,22C12,22 5,14.25 5,9A7,7 0 0,1 12,2M12,4A5,5 0 0,0 7,9C7,10 7,12 12,18.71C17,12 17,10 17,9A5,5 0 0,0 12,4Z"
                  />
                </svg>
              </MerakIcon>
              <span>{{ userInfo.location }}</span>
            </div>
            <div class="merak-user-card--info-tag">
              <MerakIcon size="14" color="#646567">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z" />
                </svg>
              </MerakIcon>
              <span>{{ userInfo.mobile }}</span>
            </div>
            <div class="merak-user-card--info-tag">
              <MerakIcon size="14" color="#646567">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path
                    d="M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M16.5,16.25C16.5,14.75 13.5,14 12,14C10.5,14 7.5,14.75 7.5,16.25V17H16.5M12,12.25A2.25,2.25 0 0,0 14.25,10A2.25,2.25 0 0,0 12,7.75A2.25,2.25 0 0,0 9.75,10A2.25,2.25 0 0,0 12,12.25Z"
                  />
                </svg>
              </MerakIcon>
              <span>{{ userInfo.job_no }}</span>
            </div>
          </div>
        </div>
        <div class="merak-user-card--info-body">
          <span>{{ $t("staff_list.company") }}&#58;&nbsp;{{ userInfo.company }}</span>
          <span>{{ $t("staff_list.department") }}&#58;&nbsp;{{ userInfo.department }}</span>
          <span>{{ $t("staff_list.position") }}&#58;&nbsp;{{ userInfo.post }}</span>
        </div>
      </div>
    </div>
    <div class="merak-user-card--handler">
      <template v-for="btn of userBtns">
        <template v-if="btn.key === 'education'">
          <el-button v-if="userInfo.nationality === 'china'" type="primary" plain @click="emit('click', btn.key)">
            {{ btn.title }}
          </el-button>
        </template>
        <el-button v-else type="primary" plain @click="emit('click', btn.key)">
          {{ btn.title }}
        </el-button>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MerakUserCardProps, MerakUserInfoType } from "./index";

import { getCurrentInstance, reactive, computed, watch } from "vue";

import { ElAvatar, ElButton } from "element-plus";

import MerakIcon from "@/components/MerakIcon/index.vue";

import { ResultEnum } from "@/enums/httpEnum";
import { getPersonnelCard } from "@/api/modules/sysManage/personnel";

const currentInstance = getCurrentInstance();

const props = defineProps<MerakUserCardProps>();

const emit = defineEmits<{
  click: [key: string];
}>();

const state = reactive<{
  loading: boolean;
  userInfo?: MerakUserInfoType;
}>({
  loading: false
});

const userInfo = computed<Partial<MerakUserInfoType>>(() => {
  if (props.userInfo) {
    return {
      user_id: props.userInfo?.userId,
      avatar: props.userInfo?.avatar,
      name: props.userInfo?.employee_name,
      sex: props.userInfo?.sex_val,
      location: props.userInfo?.office_location_id,
      mobile: props.userInfo?.mobile,
      job_no: props.userInfo?.job_no,
      nationality: props.userInfo?.nationality_val,
      company: props.userInfo?.org_company,
      department: props.userInfo?.org_department,
      post: props.userInfo?.org_title
    };
  }
  return state.userInfo ?? {};
});

const userBtns = computed(
  () =>
    props.userBtns ?? [
      { key: "user", title: currentInstance?.proxy?.$t("staff_list.personal_info") ?? "" },
      { key: "newsletter", title: currentInstance?.proxy?.$t("staff_list.newsletter_info") ?? "" },
      { key: "education", title: currentInstance?.proxy?.$t("staff_list.education_info") ?? "" },
      { key: "job", title: currentInstance?.proxy?.$t("staff_list.on_the_job_info") ?? "" },
      { key: "contract", title: currentInstance?.proxy?.$t("staff_list.contract_info") ?? "" },
      { key: "annex", title: currentInstance?.proxy?.$t("staff_list.material_attachments") ?? "" }
    ]
);

watch(
  [() => props.init, () => props.userId],
  async () => {
    state.loading = !!props.userId;
    if (!props.init || !props.userId) return;
    await getPersonnelCard(props.userId).then(({ code, data }) => {
      if (code == ResultEnum.SUCCESS) {
        state.userInfo = {
          user_id: props.userId!,
          avatar: data.avatar,
          name: data.employee_name,
          sex: data.sex,
          location: data.office_location_id,
          mobile: data.mobile,
          job_no: data.job_no,
          nationality: data.nationality,
          company: data.org_company,
          department: data.org_department,
          post: data.org_title
        };
      }
    });
    state.loading = false;
  },
  { immediate: true }
);
</script>

<style lang="scss">
.merak-user-card {
  margin: calc(0px - var(--el-popover-padding));
  font-size: var(--merak-text-size);
  &--content {
    display: flex;
    padding: 20px 27px;
  }
  &--info {
    flex: auto;
    margin-left: 16px;
    min-width: 0;
    &-title {
      display: flex;
      align-items: center;
      & > span {
        margin-right: 5px;
        font-size: 16px;
        font-weight: bold;
      }
    }
    &-tags {
      display: flex;
      align-items: center;
      margin-top: 12px;
      width: 100%;
      & > * {
        flex: auto;
      }
    }
    &-tag {
      display: inline-flex;
      align-items: center;
      & > span {
        margin-left: 3px;
      }
    }
    &-body {
      display: flex;
      flex-direction: column;
      margin-top: 38px;
      font-size: 14px;
      & > :not(:first-child) {
        margin-top: 15px;
      }
    }
  }
  &--handler {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 92px));
    justify-content: space-around;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid var(--merak-border-color);
    .el-button {
      margin: 0 !important;
    }
  }
}
</style>
